<template>
  <div id="all" class="mt24 mb24">
    <div class="assss-write">
      <!-- 无评价 -->
      <!-- <div class="assess-write-none">目前暂无评价的商品</div> -->
      <div class="assess-write-item" v-for="(value,index) in items" :key="index">
        <div class="assess-write-info">
          <div class="info-img">
            <img :src="value.imgs.split(',')[0]" alt />
          </div>
          <div class="info-title">
            <div class="info-title-inner">
              <p>{{value.product_name}}</p>
            </div>
          </div>
          <div class="info-status">
            <div class="info-title-inner">
              <p>待评价</p>
            </div>
          </div>
          <div class="info-button">
            <el-button type="primary" @click="showComent(value)" plain>评价商品</el-button>
            <el-dialog title="评价" :visible.sync="dialogFormVisible" class="dialog" center :lockScroll="false">
              <span class="demonstration">商品评分</span>
              <br><br>
              <el-rate v-model="form.point" ></el-rate>
              <br>
              <br>
                  <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.content"></el-input>
                  <br><br>
             <el-upload
              :on-success="success"
              list-type="picture-card"
              action="http://weim1.f3322.net:8088/api/file/upload"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="commet()">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </div>
      </div>
      <!-- <el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000"></el-pagination> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
      ],
      dialogFormVisible: false,
      form:{
        point:null,
        content:null,
        orderItemId:null,
        buyerId:null,
        imgs:null,
      },
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  mounted(){
    this.EventBus.$emit("active", 3);
    this.init()
  },
  methods:{
      init(){
        this.axios.post("/comment/wait").then((resp)=>{
          this.items  = resp.data
        })
      },
      success(response){
        if(!this.form.imgs){
            this.form.imgs = this.fileUrl + response.data[0]
        }else{
          this.form.imgs = this.form.imgs +","+ this.fileUrl+response.data[0]
        }
      },
      commet(){
        if(!this.form.point){
           this.$message("好与不好，麻烦点亮下小星星呢！")
          return
        }
        if(!this.form.content){
           this.$message("既然要评价，还是要说点什么吧！")
          return
        }
        if(!this.form.imgs){
          this.$message("既然要评价，那么上传几张图片吧！")
          return
        }
        this.dialogFormVisible = false
        this.axios.post("/comment/add",this.form).then((resp)=>{
          if(resp.code == 0){
            this.$message.success(resp.msg)
            this.init()
          }else{
            this.$message.errr(resp.msg)
          }
        })
      },
      showComent(value){
        this.dialogFormVisible = true; 
        this.form.orderItemId = value.id;
      }
  }
};
</script>

<style scoped>
/* 写评价列表 */
.assss-write {
  min-height: 157px;
  /* background-color: blue; */
}
/* 无评价 */
.assess-write-none {
  padding-top: 135px;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.assess-write-item {
  box-sizing: border-box;
  padding: 40px 0;
  border-top: 1px solid #ddd;
}
.assess-write-item:first-child {
  border-top: 0;
}
.assess-write-info {
  overflow: hidden;
}
.assess-write-info .info-img {
  float: left;
  width: 114px;
  height: 114px;
}
.assess-write-info .info-img img {
  width: 100%;
}
.assess-write-info .info-title {
  float: left;
  width: 435px;
  height: 114px;
  margin-left: 26px;
  font-size: 14px;
  line-height: 22px;
  /* background-color: firebrick; */
}
.assess-write-info .info-title-inner {
  display: table-cell;
  vertical-align: middle;
  width: 435px;
  height: 114px;
}
.assess-write-info .info-title-inner p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.assess-write-info .info-status {
  float: left;
  width: 300px;
  height: 114px;
  margin-left: 26px;
  font-size: 14px;
  line-height: 22px;
  /* background-color: fuchsia; */
}

.assess-write-info .info-button {
  float: right;
  margin-top: 40px;
  margin-right: 17px;
  /* background-color: forestgreen; */
}
.el-button--primary.is-plain:hover {
  background-color: #29a3d6;
}

/* 评价标题 */
.dialog {
  text-align: left;
}

/* 上传 */
.el-upload {
  width: 100px;
  height: 100px;
  line-height: 98px;
}
</style>